<template>
    <view class="orderApproval">
        <uni-nav-bar fixed left-icon="left" title="退款审批" @clickLeft="backHandle" class="unibarS">
        </uni-nav-bar>
        <uni-search-bar class="uni-mt-10" bgColor="#FFFFFF" radius="5" placeholder="搜索" clearButton="auto"
            cancelButton="none" @confirm="searchHandle()" @clear="searchHandle()" />
        <view v-if="list.length" class="list">
            <view class="item" v-for="(item, index) in list" :key="index" @click="goDetails(item)">
                <view class="item-top">
                    <view class="item-top-left">
                        <view class="name">订单编号：{{ item.refundNumber }}</view>
                        <view class="rate">退款日期：{{ item.createTime }}</view>
                        <view class="time">退款金额：￥ {{ item.refundAmount }}</view>
                    </view>
                    <view class="item-top-right">
                        <view class="state" :style="{ color: getColor(item.status) }">{{ bus_examine_status[item.approvalStatus] }}</view>
                        <view style="display: flex; flex-direction: column; align-items: center;">
                            <u-avatar :src="item.avatar"></u-avatar>
                            <view class="salesman">{{ item.businessManager }}</view>
                        </view>
                    </view>
                </view>
            </view>
            <uni-load-more :status="status" />
        </view>
        <empty-view v-else></empty-view>
    </view>
</template>

<script>
import { convertToDict } from '@/common/utils'
export default {
    data() {
        return {
            params: {
                // approvalStatus: '1002',
				keyWords: '',
				pageNum: 1,
				pageSize: 20
			},
			total: 0,
			status: 'loading',
			refresh: false,
			list: []
        }
    },
    onLoad() {
        this.bus_pay_status = convertToDict(JSON.parse(uni.getStorageSync('bus_pay_status')))
        this.bus_order_status = convertToDict(JSON.parse(uni.getStorageSync('bus_order_status')))
		
		this.bus_examine_status = convertToDict(JSON.parse(uni.getStorageSync('bus_examine_status')))
		
		this.getData()
	},
    onReachBottom() {
		console.log('上拉加载onReachBottom')
		if (this.status == 'noMore' || this.status == 'loading') return
		this.params.pageNum = this.params.pageNum + 1
		this.status = 'loading'
		this.getData()
	},
    methods: {
        getData() {
			this.$http.get('/app/audit/refundList', this.params).then(res => {
				if (res.code == 200) {
                    if(res.data.records) {
                        this.list = [...this.list, ...res.data.records]
                        this.total = res.total
                        if (this.total > this.list.length) {
                            console.log('有更多数据')
                            this.status = 'more'
                        } else {
                            console.log('没更多数据')
                            this.status = 'noMore'
                        }
                    } else {
                        this.total = 0
                        this.status = 'noMore'
                    }

					if (this.refresh) {
						uni.stopPullDownRefresh()
					}
				} else {
					uni.$u.toast(res.msg)
				}
			})
		},
        addOrder() {
            uni.navigateTo({
                url: '/pages/order/addOrder'
            });
        },
        searchHandle() {
			this.params.pageNum = 1
			this.status = 'loading'
			this.list = []
			this.getData()
		},
        seeMoney() {
            this.$refs.popup.open()
        },
        closePopup() {
            this.$refs.popup.close()
        },
        goDetails(item) {
            uni.navigateTo({
                url: '/pages/examine/refundApprovalDetails?id=' + item.id
            });
        },
		getColor(state) {
		    let color;
		    switch (state) {
		        case '1001':
		        color = 'rgba(0, 186, 173, 1)';
		        break;
		        case '1002':
		        color = 'rgba(255, 141, 26, 1)';
		        break;
		        default:
		        color = 'rgba(255, 0, 28, 1)';
		    }
		    return color;
		},
        backHandle() {
            uni.navigateBack()
        }
    }
}
</script>

<style lang="scss" scoped>

.orderApproval {
    .tab-box {
        background: #fff;

    }
}

.item {
    padding: 32rpx;
    border-radius: 24rpx;
    background: rgba(255, 255, 255, 1);
    margin-bottom: 20rpx;

    .item-top {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .item-top-left {
            flex: 1;
            margin-right: 20rpx;
            width: 0;

            .name {
                font-size: 32rpx;
                font-weight: 500;
                color: rgba(12, 16, 25, 1);
                margin-bottom: 32rpx;
                // 超出显示省略号
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            .rate,
            .time {
                font-size: 28rpx;
                font-weight: 400;
                color: rgba(103, 117, 133, 1);
                margin-bottom: 26rpx;
            }
        }

        .item-top-right {
            width: 120rpx;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            align-items: flex-end;
            text-align: right;

            .state {
                font-size: 24rpx;
                font-weight: 400;
                // color: rgba(0, 186, 173, 1);
                margin-bottom: 20rpx;
            }

            .salesman {
                margin-top: 8rpx;
                font-size: 28rpx;
                font-weight: 500;
                color: rgba(12, 16, 25, 1);
                width: 100%;
                // 超出隐藏
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
        }
    }
}

.bottom-box {
    height: 44px;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 0px 12rpx rgba(0, 0, 0, 0.1);

    text {
        font-size: 28rpx;
        font-weight: 500;
        color: rgba(77, 172, 177, 1);
    }

}

.popup-box {
    padding: 32rpx 0;

    .popup-header {
        display: flex;
        justify-content: center;
        margin-bottom: 32rpx;
    }
    .popup-content {
        padding: 0 32rpx;
        > view {
            display: flex;
            justify-content: space-between;
            margin-bottom: 32rpx;
            .price {
                color: rgba(255, 0, 28, 1);
            }
        }
    }
    .popup-footer {
        padding: 0 32rpx;
    }
}
</style>